<script lang="ts" setup>
import dayjs from 'dayjs'
import { MessageGetListReturnData, messageDelete, messageGetList, messageModifyShow } from '@/api/message'
import type { MessageGetListSendModel } from '@/api/message'

onMounted(() => {
  getMessageSystemGetList()
  getMessageShopGetList()
})
// 通知开关回调
async function switchHandleChange(row: MessageGetListReturnData) {
  const { code } = await messageModifyShow(row)
  if (code === 0) {
    window.$message?.success('切换成功')
    if (row.type === 'system')
      getMessageSystemGetList()
    else
      getMessageShopGetList()
  }
}
// 删除通知
async function removeMessage(row: MessageGetListReturnData) {
  const { code, msg } = await messageDelete({ id: row.id })
  if (code === 0) {
    window.$message?.success(msg)
    if (row.type === 'system')
      getMessageSystemGetList()
    else
      getMessageShopGetList()
  }
}
// 获取系统公告数据
const messageSystemData = ref<MessageGetListReturnData[]>([])
const listQuerySystem = reactive<MessageGetListSendModel>({
  page: 1,
  size: 2,
  type: 'system',
  total: 0,
})
const systemLoading = ref<boolean>(false)
async function getMessageSystemGetList() {
  systemLoading.value = true
  const { data, code } = await messageGetList(listQuerySystem)
  if (code === 0) {
    messageSystemData.value = data!.list
    listQuerySystem.total = data!.total
    systemLoading.value = false
    console.log(messageSystemData.value, listQuerySystem, 'messageSystemData')
  }
}
// 获取店铺公告数据
const messageShopData = ref<MessageGetListReturnData[]>([])
const listQueryShop = reactive<MessageGetListSendModel>({
  page: 1,
  size: 10,
  type: 'shop',
  total: 0,
})
const userLoading = ref<boolean>(false)
async function getMessageShopGetList() {
  userLoading.value = true
  const { data, code } = await messageGetList(listQueryShop)
  if (code === 0) {
    messageShopData.value = data!.list
    listQueryShop.total = data!.total
    userLoading.value = false
    console.log(messageShopData.value, 'messageShopData')
  }
}
// 模态框
interface DialogModel {
  visible: boolean
  title: string
  type: string
  id: number
  name: string
  isShow: boolean
  modelType: string
}
const dialog = ref<DialogModel>({
  visible: false,
  title: '', // 模态框标题
  type: '', // 通知类型
  id: 0,
  name: '',
  isShow: false,
  modelType: '',
})
// 打开模态框
function openDialog({ id, name, isShow, type }: MessageGetListReturnData = {} as MessageGetListReturnData, modelType: string) {
  dialog.value.visible = true
  dialog.value.modelType = modelType
  if (modelType === 'modify') {
    dialog.value.title = '编辑通知'
    dialog.value.id = id
    dialog.value.name = name
    dialog.value.isShow = isShow
    dialog.value.type = type
  }
  else {
    dialog.value.title = '添加新通知'
    dialog.value.id = 0
    dialog.value.name = ''
    dialog.value.isShow = false
    dialog.value.type = ''
  }
}

// 清除弹窗
function closeModal() {
  dialog.value = {
    visible: false,
    title: '', // 模态框标题
    type: '', // 通知类型
    id: 0,
    name: '',
    isShow: false,
    modelType: '',
  }
}
// 模态框提交
function submitModal() {
  return new Promise((resolve) => {
    messageModifyShow(dialog.value).then(({ code, msg }) => {
      resolve(code)
      if (code === 0) {
        window.$message?.success(msg)
        getMessageSystemGetList()
        getMessageShopGetList()
        closeModal()
      }
    })
  })
}
</script>

<template>
  <AppPage class="notice-admin">
    <n-space align="center" mb20>
      <span font-bold text-18>通知管理</span>
      <n-button strong secondary type="primary" @click="openDialog({} as MessageGetListReturnData, 'add')">
        添加通知
        <template #icon>
          <icon-material-symbols:add-box-outline />
        </template>
      </n-button>
    </n-space>
    <n-grid x-gap="20" :cols="2" item-responsive responsive="screen">
      <n-gi span="2 m:2 l:1" mb-20>
        <n-grid x-gap="15" :cols="5" bg-white p-10 text-14 b-rd-5 dark:bg-dark>
          <n-gi f-c-c font-bold>
            创建时间
          </n-gi>
          <n-gi f-c-c font-bold>
            公告内容
          </n-gi>
          <n-gi f-c-c font-bold>
            公告类型
          </n-gi>
          <n-gi f-c-c font-bold>
            通知控制
          </n-gi>
          <n-gi f-c-c font-bold>
            操作
          </n-gi>
        </n-grid>
        <template v-if="messageSystemData.length > 0">
          <n-grid v-for="item in messageSystemData" :key="item.id" x-gap="15" :cols="5" bg-white p-10 text-14 b-rd-5 mt-10 dark:bg-dark>
            <n-gi f-c-c>
              {{ dayjs(item.createTime || new Date()).format('YYYY-MM-DD HH:mm') }}
            </n-gi>
            <n-gi f-c-c>
              <n-ellipsis :line-clamp="2">
                {{ item.name || '未填写' }}
              </n-ellipsis>
            </n-gi>
            <n-gi f-c-c>
              <n-tag type="success" :bordered="false">
                {{ item.type === 'system' ? '系统通知' : '店铺通知' }}
              </n-tag>
            </n-gi>
            <n-gi f-c-c>
              <n-switch v-model:value="item.isShow" :round="false" @update:value="switchHandleChange(item)" />
            </n-gi>
            <n-gi f-c-c>
              <n-button type="info" size="small" text-14 ml-5 mt5 @click="openDialog(item, 'modify')">
                <template #icon>
                  <icon-mdi:square-edit-outline />
                </template>
                修改
              </n-button>
              <n-popconfirm
                @positive-click="removeMessage(item)"
              >
                <template #trigger>
                  <n-button type="error" size="small" text-14 ml-5 mt5>
                    <template #icon>
                      <icon-material-symbols:delete-outline />
                    </template>
                    删除
                  </n-button>
                </template>
                确定执行该操作吗？
              </n-popconfirm>
            </n-gi>
          </n-grid>
          <Cpagination
            v-model:page="listQuerySystem.page"
            :total="listQuerySystem.total"
            :page-size="listQuerySystem.size"
            @update-page="getMessageSystemGetList"
          />
        </template>
        <template v-else>
          <div bg-white p-10 text-14 font-bold b-rd-5 mt-10 dark:bg-dark f-c-c pt-20 pb-20>
            暂无数据
          </div>
        </template>
      </n-gi>
      <n-gi span="2 m:2 l:1" mb-20>
        <n-grid x-gap="15" :cols="5" bg-white p-10 text-14 b-rd-5 dark:bg-dark>
          <n-gi f-c-c font-bold>
            创建时间
          </n-gi>
          <n-gi f-c-c font-bold>
            公告内容
          </n-gi>
          <n-gi f-c-c font-bold>
            公告类型
          </n-gi>
          <n-gi f-c-c font-bold>
            通知控制
          </n-gi>
          <n-gi f-c-c font-bold>
            操作
          </n-gi>
        </n-grid>
        <template v-if="messageShopData.length > 0">
          <n-grid v-for="item in messageShopData" :key="item.id" x-gap="15" :cols="5" bg-white p-10 text-14 b-rd-5 mt-10 dark:bg-dark>
            <n-gi f-c-c>
              {{ dayjs(item.createTime || new Date()).format('YYYY-MM-DD HH:mm') }}
            </n-gi>
            <n-gi f-c-c>
              <n-ellipsis :line-clamp="2">
                {{ item.name || '未填写' }}
              </n-ellipsis>
            </n-gi>
            <n-gi f-c-c>
              <n-tag type="error" :bordered="false">
                {{ item.type === 'system' ? '系统通知' : '店铺通知' }}
              </n-tag>
            </n-gi>
            <n-gi f-c-c>
              <n-switch v-model:value="item.isShow" :round="false" @update:value="switchHandleChange(item)" />
            </n-gi>
            <n-gi f-c-c flex-wrap>
              <n-button type="info" size="small" text-14 ml-5 mt5 @click="openDialog(item, 'modify')">
                <template #icon>
                  <icon-mdi:square-edit-outline />
                </template>
                修 改
              </n-button>
              <n-popconfirm
                @positive-click="removeMessage(item)"
              >
                <template #trigger>
                  <n-button type="error" size="small" text-14 ml-5 mt5>
                    <template #icon>
                      <icon-material-symbols:delete-outline />
                    </template>
                    删 除
                  </n-button>
                </template>
                确定执行该操作吗？
              </n-popconfirm>
            </n-gi>
          </n-grid>
          <Cpagination
            v-model:page="listQueryShop.page"
            :total="listQueryShop.total"
            :page-size="listQueryShop.size"
            @update-page="getMessageShopGetList"
          />
        </template>
        <template v-else>
          <div bg-white p-10 text-14 font-bold b-rd-5 mt-10 dark:bg-dark f-c-c pt-20 pb-20>
            暂无数据
          </div>
        </template>
      </n-gi>
    </n-grid>
  </AppPage>
  <Cdialog v-model:visible="dialog.visible" :title="dialog.title">
    <n-input
      v-model:value="dialog.name"
      type="textarea"
      placeholder="输入通知内容"
    />
    <n-space mt-15 align="center">
      <span>通知控制</span>
      <n-switch v-model:value="dialog.isShow" :round="false" />
    </n-space>
    <n-space mt-15 align="center">
      <span>通知类别</span>
      <n-button-group size="medium">
        <n-button :type="dialog.type === 'system' ? 'primary' : ''" @click="dialog.type = 'system'">
          系统通知
        </n-button>
        <n-button :type="dialog.type === 'shop' ? 'primary' : ''" @click="dialog.type = 'shop'">
          店铺通知
        </n-button>
      </n-button-group>
    </n-space>
    <template #footer>
      <div f-c-c>
        <n-button mr-5 b-rd-5 size="medium" @click="closeModal">
          <n-icon cursor-pointer size="16">
            <icon-mdi:cancel />
          </n-icon>
          <span ml-2>取 消</span>
        </n-button>
        <n-button ml-5 b-rd-5 type="primary" size="medium" @click="submitModal">
          <n-icon cursor-pointer size="16">
            <icon-mdi:checkbox-marked-circle-outline />
          </n-icon>
          <span ml-2>确 定</span>
        </n-button>
      </div>
    </template>
  </Cdialog>
</template>

<style lang="scss" scoped>
.notice-admin{
//   &-left-header{`
//     background-color: #fff;
//   }
}
</style>
